<template>
    <div id="order">
        <table class="order_tab">
            <thead>
            <tr>
                <th><img src="../../common/image/officer/u3079.png"/><span>费用名称</span></th>
                <th><img src="../../common/image/officer/rmb.png"/><span>单价</span></th>
                <th><img src="../../common/image/officer/num.png"/><span>数量</span></th>
            </tr>
            </thead>
            <tbody>
            <tr><td>注册费</td><td>{{base_num}}</td><td>{{base_numb}}</td></tr>
            <tr><td>超页费</td><td>{{super_num}}</td><td>{{reg_numb}}</td></tr>
            <tr><td>参会费</td><td>{{join_num}}</td><td>{{meeting}}</td></tr>
            </tbody>
        </table>
        <!--底部-->
        <div class="bottom">
            <div class="bottom_f">合  计：<span>¥&nbsp;{{total}}</span></div>
            <div class="bottom_r" @click="sum">结算</div>
        </div>
    </div>
</template>

<script>
  import {Toast,Indicator} from 'mint-ui';
  import {RequestPost} from '@/api/http.js'
    export default {
        name: "order",
        data(){
            return{
                base_num:null,//基础费用
                reg_numb:null,//超页数
                super_num:null,//超页费用
                join_num:null,//参会费用
                meeting:null,//参会费表单数组
                total:null,//总价
                meetingArr:null,//参会费表单数组
                papert:null,//稿件
                mid:null,//会议id
                regArr:null,//注册费表单数组
                userId:null,
                base_numb:localStorage.getItem('base_numb')

            }
        },
        beforeCreate(){
            // console.log('beforeCreate:刚刚new Vue()之后，这个时候，数据还没有挂载呢，只是一个空壳')
            // console.log(this.msg)//undefined
            // console.log(document.getElementsByClassName("myp")[0])//undefined
        },
        created(){
          let auth =JSON.parse(localStorage.getItem('login'))
          this.userId=auth.id
          this.base_num= localStorage.getItem('base_num');//基础费用
          this.super_num= localStorage.getItem('super_num');//超页费用
          this.join_num=localStorage.getItem('join_num');//参会费用
          this.reg_numb=localStorage.getItem('reg_numb');//超页数
          this.meeting= localStorage.getItem('meeting');//参会费数量
          this.total=localStorage.getItem('total');//总价
          this.regArr=JSON.parse(localStorage.getItem('regArr'));//注册费表单数组
          this.meetingArr=JSON.parse(localStorage.getItem('meetingArr'));//参会费表单数组
          this.papert=JSON.parse(localStorage.getItem('papert'));//稿件
          this.mid=localStorage.getItem('mid');//会议id
            // this.regArr= JSON.parse(this.$route.params.regArr)
           console.log(this.regArr,this.meetingArr,this.papert)
            // console.log(
            //   // this.$route.params.reg_numb,
            //   // this.$route.params.base_num,
            //   // this.$route.params.super_num,
            //   // this.$route.params.join_num,
            //   this.$route.params.meeting
            // )
            // console.log('created:这个时候已经可以使用到数据，也可以更改数据,在这里更改数据不会触发updated函数')
            // this.msg+='!!!'
            // console.log('在这里可以在渲染前倒数第二次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取')
            // console.log('接下来开始找实例或者组件对应的模板，编译模板为虚拟dom放入到render函数中准备渲染')
        },
        beforeMount(){
            // console.log('beforeMount：虚拟dom已经创建完成，马上就要渲染,在这里也可以更改数据，不会触发updated')
            // this.msg+='@@@@'
            // console.log('在这里可以在渲染前最后一次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取')
            // console.log(document.getElementsByClassName("myp")[0])//undefined
            // console.log('接下来开始render，渲染出真实dom')
        },
        // render:function(createElement){
        //     console.log('render')
        //     return createElement('div','hahaha')
        // },
        mounted(){
            // console.log('mounted：此时，组件已经出现在页面中，数据、真实dom都已经处理好了,事件都已经挂载好了')
            // console.log(document.getElementsByClassName("myp")[0])
            // console.log('可以在这里操作真实dom等事情...')
            //  let officer_li = document.getElementsByClassName('officer-li');
            // officer_li.onclick(function() {
            //   for (let i = 0; i<officer_li.length; i++) {
            //    console.log(11)
            //   }
            // })

            //    this.$options.timer = setInterval(function () {
            //        console.log('setInterval')
            //         this.msg+='!'
            //    }.bind(this),500)
        },
        methods: {
            sum:function () {
                // this.$router.push({name: 'pay',params:
                //         {
                //             total:this.total //总数
                //         }
                // })
              console.log(this.regArr)
              RequestPost({url:'/meeting/gopay',data:{
                    userId:this.userId,
                    mid:this.mid,
                    regArr:this.regArr,//注册费表单数组
                    meetingArr:this.meetingArr,//参会费表单数组
                    papert:this.papert,//稿件
               }
              }).then((response) => {
                console.log(response.data)
                function onBridgeReady(){
                  console.log(response.data)
                  WeixinJSBridge.invoke(
                    'getBrandWCPayRequest', {
                      "appId":response.data.data.appId,     //公众号名称，由商户传入
                      "timeStamp":response.data.data.timeStamp,         //时间戳，自1970年以来的秒数
                      "nonceStr":response.data.data.nonceStr, //随机串
                      "package":response.data.data.package,
                      "signType":response.data.data.signType,         //微信签名方式：
                      "paySign":response.data.data.paySign //微信签名
                    },
                    function(res){
                      console.log(res)
                      if(res.err_msg == "get_brand_wcpay_request:ok" ){
                        // 使用以上方式判断前端返回,微信团队郑重提示：
                        //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                      }else if (res.err_msg =="get_brand_wcpay_request:fail") {

                      }
                    });
                }
                if (typeof WeixinJSBridge == "undefined"){
                  if( document.addEventListener ){
                    document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
                  }else if (document.attachEvent){
                    document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
                    document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
                  }
                  alert("这不是微信，支付不了哦")
                }else{
                  onBridgeReady();
                }
              }).catch(err => {
                Toast({
                  message: '获取数据失败',
                  duration: 3000
                });
              })
            }
        },
        watch:{

        },
        beforeUpdate:function(){
            //这里不能更改数据，否则会陷入死循环
            // console.log('beforeUpdate:重新渲染之前触发')
            // console.log('然后vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染')
        },
        updated:function(){
            //这里不能更改数据，否则会陷入死循环
            // console.log('updated:数据已经更改完成，dom也重新render完成')
        },
        beforeDestroy:function(){
            // console.log('beforeDestory:销毁前执行（$destroy方法被调用的时候就会执行）,一般在这里善后:清除计时器、清除非指令绑定的事件等等...')
            // clearInterval(this.$options.timer)
        },
        destroyed:function(){
            // console.log('destroyed:组件的数据绑定、监听...都去掉了,只剩下dom空壳，这里也可以善后')
        }
    }
</script>

<style lang="scss" scoped>
    *{
        font-size: 26px;
    }
    #order{
        padding-left: 20px;
        padding-right: 20px;
        .order_tab{
            width: 100%;
            thead{
                tr{
                    border-bottom: 1px solid #D7D7D7; /*no*/
                    th{
                        width: 33.3%;
                        text-align: center;
                        height: 80px;
                        line-height: 80px;
                        img{
                            vertical-align: sub;
                            height: 32px;
                            margin-right: 10px;
                        }
                    }
                }
            }
            tbody{
                tr{
                    height: 80px;
                    line-height: 80px;
                    border-bottom: 1px solid #D7D7D7; /*no*/
                    td{
                        width: 33.3%;
                        text-align: center;
                        overflow: auto;
                        white-space: nowrap;
                    }
                }
            }
        }
        /*底部*/
        .bottom{
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            overflow: hidden;
            clear: none;
            border-top: 1px solid #ddd; /*no*/
            background: hsla(0,0%,100%,.95);
            .bottom_f{
                float: left;
                width: 70%;
                text-align: center;
                height: 80px;
                line-height: 80px;
                /*background-color: #0099CC;*/
                span{
                    color: #FF0000;
                }
            }
            .bottom_r{
                float: left;
                width: 30%;
                height: 80px;
                line-height: 80px;
                font-weight: 700;
                font-size: 32px;
                background-color: #FF0000;
                text-align: center;
                color: #fff;
                letter-spacing:8px;
            }
        }
    }
</style>
